<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-stack
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <!-- <script src="{{ url_for('static',filename='js/k-line.js') }}"></script> -->
    <!-- <script src="{{ url_for('static',filename='js/update.js') }}"></script> -->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var data = getData();
        var stock_name = new Array();
        var stock_series = new Array();

        for (var i = 0; i < data['list'].length; i++) {
            stock_name.push(data['list'][i][1]);
            _data = getStockTrend(data['list'][i][0]);
            var _priceArr = get_m_data(_data['trend']).priceArr;
            var _times = get_m_data(_data['trend']).times;
            var __data = new Array();
            for (var j = 0; j < _priceArr.length; j++) {
                __data.push(ratioCalculate(_priceArr[j], _data['preclose_px']))
            }

            stock_series.push({
                name: data['list'][i][1],
                type: 'line',
                // stack: 'Total',
                data: __data,
                symbol: 'none'
            });
        }

        var option;



        option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: stock_name
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: _times
            },
            yAxis: {
                type: 'value'
            },
            series: stock_series
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        function getData() {
            var m_data = []
            $.ajax({
                url: '/yesterday_limit2',
                data: {},
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    m_data = data;
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
            return m_data;
        };

        /*
        获取个股分时数据
        */
        function getStockTrend(code) {
            var m_data = []
            $.ajax({
                url: '/stock_trend',
                data: {
                    date: code
                },
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function(data) {
                    m_data = data;
                },
                error: function(msg) {
                    console.log(msg);
                }
            })
            return m_data;
        };

        /**
         * 计算价格涨跌幅百分比
         * @param {Object} price 当前价
         * @param {Object} yclose 昨收价
         */
        function ratioCalculate(price, yclose) {
            return ((price - yclose) / yclose * 100).toFixed(3);
        }

        function get_m_data(m_data) {
            var priceArr = new Array();
            var avgPrice = new Array();
            var vol = new Array();
            var times = new Array();
            $.each(m_data, function(i, v) {
                times.push(v[0]);
                priceArr.push(v[1]);
                avgPrice.push(v[2]);
                vol.push(v[3]);
            })
            return {
                priceArr: priceArr,
                avgPrice: avgPrice,
                vol: vol,
                times: times
            }
        }
    </script>
</body>

</html>